<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
        Coloring options for textured buildings | Sample | ArcGIS API for
        JavaScript 4.18
    </title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #colorMixMode {
            background-color: #f69c9f;
            padding: 20px;
            font-size: 0.8em;
        }

        #colorMixMode label {
            padding-right: 10px;
            cursor: pointer;
        }
    </style>

    <link
            rel="stylesheet"
            href="https://js.arcgis.com/4.18/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.18/"></script>

    <script>
        require([
            "esri/WebScene",
            "esri/views/SceneView",
            "esri/layers/SceneLayer",
            "esri/widgets/Legend"
        ], function (WebScene, SceneView, SceneLayer, Legend) {
            //加载一个网络场景并将其添加到视图中
            var webscene = new WebScene({
                portalItem: {
                    // autocasts as new PortalItem()
                    id: "03a9607d96244883af64c7f8c7e5de1b"
                }
            });

            var view = new SceneView({
                container: "viewDiv",
                map: webscene
            });

            //使用带纹理的建筑物创建 SceneLayer
            var layer = new SceneLayer({
                portalItem: {
                    id: "fdfa7e3168e74bf5b846fc701180930b"
                },
                title: "Buildings in Helsinki"
            });

            webscene.add(layer);

            //添加选择按钮部件至左下角
            view.ui.add("colorMixMode", "bottom-left");


            document
                .getElementById("colorMixMode")
                .addEventListener("change", function (event) {
                    setRenderer(event.target.id);
                });



            //渲染
            function setRenderer(type) {
                //原始
                if (type === "original") {
                    layer.renderer = null;
                }
                //
                else if (type === "select") {
                    layer.renderer = getUniqueValueRenderer(null, null);
                } else if (type === "emphasize") {
                    layer.renderer = getUniqueValueRenderer("#F5D5A9", "tint");
                } else {
                    var colorMixMode = type === "desaturate" ? "tint" : "replace";

                    // Create a SimpleRenderer and apply it to the layer
                    var locationRenderer = {
                        type: "simple", // autocasts as new SimpleRenderer()
                        symbol: {
                            type: "mesh-3d", // autocasts as new MeshSymbol3D()
                            symbolLayers: [
                                {
                                    type: "fill", // autocasts as new FillSymbol3DLayer()
                                    material: {
                                        color: "white",
                                        colorMixMode: colorMixMode
                                    }
                                }
                            ]
                        }
                    };
                    layer.renderer = locationRenderer;
                }
            }

            //获取渲染的对象
            function getUniqueValueRenderer(color,colorMixMode){
                return{
                    type:"unique-value",
                    field: "usage",
                    defaultSymbol: {
                        type: "mesh-3d",
                        symbolLayers: [
                            {
                                type: "fill",
                                material: {
                                    color: [230, 230, 230, 0.7],
                                    colorMixMode: "replace"//移除几何体纹理颜色并应用材质color。
                                }
                            }
                        ]
                    },
                    uniqueValueInfos: [
                        {
                            value: "general or commercial",
                            label: "commercial buildings",
                            symbol: {
                                type: "mesh-3d", // autocasts as new MeshSymbol3D()
                                symbolLayers: [
                                    {
                                        type: "fill", // autocasts as new FillSymbol3DLayer()
                                        material: {
                                            color: color,
                                            colorMixMode: colorMixMode
                                        }
                                    }
                                ]
                            }
                        }
                    ],
                    legendOptions: {
                        title: "Usage"
                    }
                }
            }
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
<div id="colorMixMode" class="esri-widget">
    <input type="radio" id="original" name="mode" checked/>
    <label for="original">具有原始质感的建筑</label> <br/>
    <input type="radio" id="select" name="mode"/>
    <label for="select">展示商业建筑</label> <br/>
    <input type="radio" id="emphasize" name="mode"/>
    <label for="emphasize">强调商业建筑</label> <br/>
    <input type="radio" id="desaturate" name="mode"/>
    <label for="desaturate">去饱和纹理</label> <br/>
    <input type="radio" id="replace" name="mode"/>
    <label for="replace">去除纹理</label>
</div>
</body>
</html>
